<template>
	<view class="fui-wrap">
		<fui-result v-if="err" type="fail" title="操作失败" :descr="err">
			<fui-button @click="$reLaunch('index/index')" width="400rpx" height="84rpx" text="返回主页" type="success" bold :margin="['48rpx','0','24rpx']"></fui-button>
		</fui-result>
		<!--月租车续费-->
		<block v-if="!err && plate">
			<view class="wrap-top" :style="`margin-bottom:${safebottom}rpx`">
				<view class="panel" :style="`background: url('${baseUrl}/assets/img/img_layer_3x.png')#fff no-repeat;background-size: 100% 200rpx;`">
					<view class="parking-title">
						<fui-text text="欢迎您!" size="36" block fontWeight="800" color="#fff"></fui-text>
						<view style="margin-top: 10rpx;">
							<fui-text :text="parking.title" size="28" color="#fff" block></fui-text>
						</view>
						<view style="margin-top: 10rpx;">
							<fui-text text="车场服务电话：" size="28" color="#fff"></fui-text>
							<fui-text :text="parking.phone" size="28" color="#fff" decoration="underline" @click="makePhone"></fui-text>
						</view>
					</view>
					<fui-section :padding="['0rpx','0rpx']" title="月卡信息" isLine></fui-section>
					<view class="line-box">
						<view class="line">
							<fui-text text="车牌号码：" color="#afafaf" :size="28"></fui-text>
							<view style="display: flex;">
								<fui-text :text="plate.plate_number" color="#000" :size="28"></fui-text>
								<fui-tag style="margin-left: 10rpx;" v-if="plate.cars.status=='hidden'" text="已报停" type="danger"></fui-tag>
							</view>
						</view>
						<view class="line">
							<fui-text text="月租金额：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="'￥'+activeRules.fee+'/月'" color="#000" :size="28" ></fui-text>
						</view>
						<view class="line">
							<fui-text text="截至日期：" color="#afafaf" :size="28"></fui-text>
							<view style="display: flex;">
								<fui-text :text="formatDate(plate.cars.endtime)" color="#000" :size="28" ></fui-text>
								<fui-tag style="margin-left: 10rpx;" v-if="plate.cars.is_expire" text="已过期" type="danger"></fui-tag>
							</view>
						</view>
						<fui-alert v-if="plate.cars.is_expire && activeRules.online_renew=='no'" type="clear" desc="您的月卡已过期，且不支持在线续费，如需续费请联系停车场。" size="28rpx" :marginTop="24"></fui-alert>
					</view>
				</view>
				<view class="panel">
					<fui-section :padding="['0rpx','0rpx']" title="续费详情" isLine></fui-section>
					<view class="line-box">
						<view class="line">
							<fui-text text="续费时长：" color="#afafaf" :size="28"></fui-text>
							<picker mode="selector" class="selector" :value="range" :range="activeRules.xuFee" range-key="txt" @change="changeXuMonth">
								<fui-text :text="activeRules.xuFee[range].month+'个月'" color="#000" :size="28" style="margin-right: 10rpx;"></fui-text>
								<fui-icon name="arrowright" size="32"></fui-icon>
							</picker>
						</view>
						<view class="line">
							<fui-text text="续费后开始时间：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="activeRules.xuFee[range].starttime" color="#000" :size="28" ></fui-text>
						</view>
						<view class="line">
							<fui-text text="续费后结束时间：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="activeRules.xuFee[range].endtime" color="#000" :size="28" ></fui-text>
						</view>
						<fui-alert v-if="plate.cars.is_xufee_expire && activeRules.auto_online_renew=='no'" type="warn" :desc="`您的月卡已经过了续租${activeRules.renew_limit_day}天宽限期，提交后将由管理员重新审核，审核通过后月卡恢复正常使用，审核不通过将退还您支付的费用。`" size="28rpx" :marginTop="24"></fui-alert>
					</view>
				</view>
				<view class="panel" v-if="plate.cars.is_xufee_expire && xuFeeRemark">
					<fui-section :padding="['0rpx','0rpx']" title="备注资料" isLine></fui-section>
					<view class="line-box">
						<block v-for="(item,index) in activeRules.online_renew_remark" :key="index">
							<view class="line" v-if="item.type=='txt'" style="margin-bottom: 30rpx;">
								<view class="title">
									<fui-text text="*" color="#e84e27" :size="28"></fui-text>
									<fui-text :text="item.remark+'：'" color="#afafaf" :size="28"></fui-text>
								</view>
								<fui-input v-model="xuFeeRemark[item.remark]" :padding="['16rpx','32rpx']" size="28" :clearable="true" :placeholder="'请输入'+item.remark"></fui-input>
							</view>
							<view class="image" v-if="item.type=='image'" style="margin-bottom: 30rpx;">
								<view class="title">
									<fui-text text="*" color="#e84e27" :size="28"></fui-text>
									<fui-text :text="item.remark+'：'" color="#afafaf" :size="28"></fui-text>
								</view>
								<fui-upload immediate :param="item.remark" @success="uploadSuccess" :url="baseUrl+'common/upload'" :header="{'x-requested-with':'XMLHttpRequest','token':token}" style="margin-left: 40rpx;" :sizeType="['compressed']" max="1" width="120" height="120"></fui-upload>
							</view>
						</block>
					</view>
				</view>
			</view>
			<view class="pay" :style="`height: ${safebottom}rpx;`">
				<view class="hang">
					<view class="left">
						<fui-text text="需支付：" color="#000" :size="28"></fui-text>
						<fui-text text="￥" color="#fcb11a" :size="24"></fui-text>
						<fui-text :text="activeRules.xuFee[range].fee" color="#fcb11a" :size="42" style="margin-left: 6rpx;position: relative;top: 4rpx;"></fui-text>
					</view>
					<fui-button :disabled="plate.cars.is_expire && activeRules.online_renew=='no'" radius="32rpx" width="270rpx" height="70rpx" @click="payNow">立即支付</fui-button>
				</view>
			</view>
		</block>
		<!--月租车申请-->
		<block v-if="!err && !plate && applyRulesArr.length>0">
			<view class="wrap-top" :style="`margin-bottom:${safebottom}rpx`">
				<view class="panel" :style="`background: url('${baseUrl}/assets/img/img_layer_3x.png')#fff no-repeat;background-size: 100% 200rpx;`">
					<view class="parking-title">
						<fui-text text="欢迎您!" size="36" block fontWeight="800" color="#fff"></fui-text>
						<view style="margin-top: 10rpx;">
							<fui-text :text="parking.title" size="28" color="#fff" block></fui-text>
						</view>
						<view style="margin-top: 10rpx;">
							<fui-text text="车场服务电话：" size="28" color="#fff"></fui-text>
							<fui-text :text="parking.phone" size="28" color="#fff" decoration="underline" @click="makePhone"></fui-text>
						</view>
					</view>
					<fui-section :padding="['0rpx','0rpx']" title="申请月卡" isLine></fui-section>
					<view class="line-box">
						<view class="line">
							<fui-text text="车牌号码：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="plate_number" color="#000" :size="28"></fui-text>
						</view>
						<view class="line">
							<fui-text text="月租金额：" color="#afafaf" :size="28"></fui-text>
							<block v-if="applyRulesArr.length>1">
								<picker mode="selector" class="selector" :value="applyActive" :range="applyRulesArr" range-key="title" @change="changeApplyRule">
									<fui-text :text="'￥'+applyRulesArr[applyActive].fee+'/月'" color="#000" :size="28" style="margin-right: 10rpx;"></fui-text>
									<fui-icon name="arrowright" size="32"></fui-icon>
								</picker>
							</block>
							<block v-else>
								<fui-text :text="'￥'+applyRulesArr[applyActive].fee+'/月'" color="#000" :size="28" style="margin-right: 10rpx;"></fui-text>
							</block>
						</view>
					</view>
				</view>
				<view class="panel">
					<fui-section :padding="['0rpx','0rpx']" title="充值详情" isLine></fui-section>
					<view class="line-box">
						<view class="line">
							<fui-text text="充值时长：" color="#afafaf" :size="28"></fui-text>
							<picker mode="selector" class="selector" :value="range" :range="applyRulesArr[applyActive].rechargeFee" range-key="txt" @change="changeApplyMonth">
								<fui-text :text="applyRulesArr[applyActive].rechargeFee[range].month+'个月'" color="#000" :size="28" style="margin-right: 10rpx;"></fui-text>
								<fui-icon name="arrowright" size="32"></fui-icon>
							</picker>
						</view>
						<view class="line">
							<fui-text text="充值后开始时间：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="applyRulesArr[applyActive].rechargeFee[range].starttime" color="#000" :size="28" ></fui-text>
						</view>
						<view class="line">
							<fui-text text="充值后结束时间：" color="#afafaf" :size="28"></fui-text>
							<fui-text :text="applyRulesArr[applyActive].rechargeFee[range].endtime" color="#000" :size="28" ></fui-text>
						</view>
						<fui-alert v-if="applyRulesArr[applyActive].auto_online_apply=='yes'" type="warn" desc="支付成功后月卡立即生效" size="28rpx" :marginTop="24"></fui-alert>
						<fui-alert v-if="applyRulesArr[applyActive].auto_online_apply=='no'" type="warn" desc="支付成功后将提交给管理员审核，审核通过月卡才能正常使用，审核不通过将退还您支付的费用。" size="28rpx" :marginTop="24"></fui-alert>
					</view>
				</view>
				<view class="panel">
					<fui-section :padding="['0rpx','0rpx']" title="备注资料" isLine></fui-section>
					<view class="line-box">
						<view class="line" style="margin-bottom: 30rpx;">
							<view class="title">
								<fui-text text="*" color="#e84e27" :size="28"></fui-text>
								<fui-text text="车主姓名：" color="#afafaf" :size="28"></fui-text>
							</view>
							<fui-input v-model="contact" :padding="['16rpx','32rpx']" size="28" :clearable="true" placeholder="请输入车主姓名"></fui-input>
						</view>
						<view class="line" style="margin-bottom: 30rpx;">
							<view class="title">
								<fui-text text="*" color="#e84e27" :size="28"></fui-text>
								<fui-text text="手机号：" color="#afafaf" :size="28"></fui-text>
							</view>
							<fui-input v-model="mobile" :padding="['16rpx','32rpx']" size="28" :clearable="true" placeholder="请输入车主手机号"></fui-input>
						</view>
						<block v-if="applyRulesArr[applyActive].online_apply_remark && applyRemark">
							<block v-for="(item,index) in applyRulesArr[applyActive].online_apply_remark" :key="index">
								<view class="line" v-if="item.type=='txt'" style="margin-bottom: 30rpx;">
									<view class="title">
										<fui-text text="*" color="#e84e27" :size="28"></fui-text>
										<fui-text :text="item.remark+'：'" color="#afafaf" :size="28"></fui-text>
									</view>
									<fui-input v-model="applyRemark[item.remark]" :padding="['16rpx','32rpx']" size="28" :clearable="true" :placeholder="'请输入'+item.remark"></fui-input>
								</view>
								<view class="image" v-if="item.type=='image'" style="margin-bottom: 30rpx;">
									<view class="title">
										<fui-text text="*" color="#e84e27" :size="28"></fui-text>
										<fui-text :text="item.remark+'：'" color="#afafaf" :size="28"></fui-text>
									</view>
									<fui-upload immediate :param="item.remark" @success="applySuccess" :url="baseUrl+'common/upload'" :header="{'x-requested-with':'XMLHttpRequest','token':token}" style="margin-left: 40rpx;" :sizeType="['compressed']" max="1" width="120" height="120"></fui-upload>
								</view>
							</block>
						</block>
					</view>
				</view>
			</view>
			<view class="pay" :style="`height: ${safebottom}rpx;`">
				<view class="hang">
					<view class="left">
						<fui-text text="需支付：" color="#000" :size="28"></fui-text>
						<fui-text text="￥" color="#fcb11a" :size="24"></fui-text>
						<fui-text :text="applyRulesArr[applyActive].rechargeFee[range].fee" color="#fcb11a" :size="42" style="margin-left: 6rpx;position: relative;top: 4rpx;"></fui-text>
					</view>
					<fui-button radius="32rpx" width="270rpx" height="70rpx" @click="payApply">立即支付</fui-button>
				</view>
			</view>
		</block>
	</view>
</template>

<script>
	import {methods,baseUrl} from '@/utils/core.js';
	import {formatDate} from '@/utils/util.js'
	export default {
		data() {
			return {
				err:'',
				parking:'',
				applyRulesArr:'',
				applyActive:0,
				activeRules:'',
				range:0,
				plate:'',
				plate_number:'',
				mobile:'',
				contact:'',
				xuFeeRemark:'',
				applyRemark:'',
				baseUrl:baseUrl,
				safebottom:0,
				token:'',
			}
		},
		onLoad(e) {
			this.token=uni.getStorageSync('token');
			this.plate_number=e.plate_number;
			this.getCars(e.parking_id);
			let that=this;
			uni.getSystemInfo({
			  success: function (info) {
				that.safebottom=info.safeAreaInsets.bottom+100;
			  }
			});
		},
		methods: {
			...methods,
			makePhone:function(){
				uni.makePhoneCall({
					phoneNumber:this.parking.phone
				});
			},
			uploadSuccess:function(e){
				let res=JSON.parse(e.res.data);
				let fullurl=res.data.fullurl;
				this.xuFeeRemark[e.param]=fullurl;
			},
			applySuccess:function(e){
				let res=JSON.parse(e.res.data);
				let fullurl=res.data.fullurl;
				this.applyRemark[e.param]=fullurl;
			},
			payNow:function(){
				let change_type='end';
				let that=this;
				if(this.plate.cars.is_xufee_expire){
					for(let k in this.xuFeeRemark){
						if(this.xuFeeRemark[k]===''){
							this.$msg('请输入'+k);
							return;
						}
					}
					change_type='now';
				}
				this.$post('recharge/monthrenew',{
					plate_number:this.plate_number,
					cars_id:this.plate.cars_id,
					change_type:change_type,
					remark:this.xuFeeRemark,
					month:this.activeRules.xuFee[this.range].month,
				},true,true).then(res=>{
					wx.requestPayment({
						...res.payInfo,
						success:function(){
							that.$msg('支付成功');
							that.$redirectTo('index/rules?rules_type=monthly');
						},
						fail:function(){
							that.$msg('支付失败');
						}
					});
				});
			},
			payApply:function(){
				let that=this;
				if(this.applyRemark){
					for(let k in this.applyRemark){
						if(this.applyRemark[k]===''){
							this.$msg('请输入'+k);
							return;
						}
					}
				}
				if(!this.contact || this.contact.length>10){
					this.$msg('请输入准确的车主姓名');
					return;
				}
				let pattern = /^1[3-9]\d{9}$/; 
				if(!pattern.test(this.mobile)){
					this.$msg('请输入正确车主手机号');
					return;
				}
				this.$post('recharge/monthapply',{
					contact:this.contact,
					mobile:this.mobile,
					plate_number:this.plate_number,
					rules_id:this.applyRulesArr[this.applyActive].id,
					remark:this.applyRemark,
					month:this.applyRulesArr[this.applyActive].rechargeFee[this.range].month,
				},true,true).then(res=>{
					wx.requestPayment({
						...res.payInfo,
						success:function(){
							that.$msg('支付成功');
							that.$redirectTo('index/rules?rules_type=monthly');
						},
						fail:function(){
							that.$msg('支付失败');
						}
					});
				});
			},
			getCars:function(parking_id){
				this.$get('recharge/cars',{parking_id:parking_id,type:'monthly',plate_number:this.plate_number},true).then(res=>{
					let applyRulesArr=[];
					this.parking=res.parking;
					for(let i=0;i<res.rules.length;i++){
						if(res.plate && res.plate.cars.rules_id==res.rules[i].id){
							this.activeRules=res.rules[i];
							if(this.activeRules.online_renew_remark){
								let remark={};
								for(let j=0;j<this.activeRules.online_renew_remark.length;j++){
									remark[this.activeRules.online_renew_remark[j].remark]='';
								}
								this.xuFeeRemark=remark;
							}
						}
						if(res.rules[i].online_apply=='yes'){
							applyRulesArr.push(res.rules[i]);
						}
					}
					this.applyRulesArr=applyRulesArr;
					this.plate=res.plate;
					if(!this.plate && this.applyRulesArr.length===0){
						this.err='该停车场不支持在线申请月卡';
					}
					if(this.plate && this.activeRules.online_recharge=='no'){
						this.err='该停车场月卡不支持在线续费';
					}
					this.formatApplyRemark();
					let bartitle='申请月卡';
					if(res.plate){
						bartitle='月租续费';
					}
					uni.setNavigationBarTitle({
						title:bartitle
					});
				});
			},
			formatDate:function(time){
				return formatDate(new Date(time*1000));
			},
			changeXuMonth:function(e){
				this.range=parseInt(e.detail.value);
			},
			changeApplyRule:function(e){
				this.applyActive=parseInt(e.detail.value);
				this.formatApplyRemark();
				this.range=0;
			},
			changeApplyMonth:function(e){
				this.range=parseInt(e.detail.value);
			},
			formatApplyRemark:function(){
				if(this.applyRulesArr.length===0){
					return;
				}
				let remark={};
				let online_apply_remark=this.applyRulesArr[this.applyActive].online_apply_remark;
				if(!online_apply_remark){
					this.applyRemark='';
					return;
				}
				for(let j=0;j<online_apply_remark.length;j++){
					remark[online_apply_remark[j].remark]='';
				}
				this.applyRemark=remark;
			}
		}
	}
</script>

<style lang="scss" scoped>
.fui-wrap{
	
}
.wrap-top{
	padding: 20rpx;
}
.panel{
	background-color: #fff;
	border-radius: 8rpx;
	padding: 28rpx;
	margin-bottom: 20rpx;
}
.parking-title{
	height: 200rpx;
}
.line-box{
	background-color: #fff;
	padding: 20rpx 0rpx;
	margin-bottom: 20rpx;
	padding-bottom: 0;
	.line{
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 30rpx;
		height: 70rpx;
		.title{
			width: 160rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
	.image{
		height: 120rpx;
		display: flex;
		padding: 0 30rpx;
		.title{
			width: 160rpx;
			display: flex;
			justify-content: flex-end;
		}
	}
}
.selector{
	display: flex;
	align-items: center;
	position: relative;
	left: 16rpx;
}
.pay{
	z-index: 9999;
	position: fixed;
	width: 100%;
	background-color: #fff;
	left:0;
	bottom: 0;
	.hang{
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding: 20rpx 24rpx;
		.left{
			display: flex;
			align-items: flex-end;
		}
	}
}
</style>